<!DOCTYPE html>
<html lang="en">
  <body>
  <div>
    <div ng-include="headerInclude"></div>   
    <div ng-controller="Apiman.AdminExportImportController" class="page container-pf-nav-pf-vertical container-fluid admin-page" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <div class="col-md-12">
          <div ng-include="'plugins/api-manager/html/admin/admin_bc.include'"></div>
        </div>
      </div>
      <div class="row">
        <!-- Admin Content -->
        <div class="col-md-12 admin-content">
          <div class="container-fluid">
            <div class="row">
              <h2 class="title" data-field="heading" apiman-i18n-key="export-import-data">Export/Import Data</h2>
            </div>
            <!-- Helpful hint -->
            <div class="row">
              <div class="col-md-12">
                <p class="apiman-label-faded" apiman-i18n-key="export-import-data-help-text" class="apiman-label-faded">
                  Export all data from the API Management into an output file or use such a file to import data into
                  this installation.</p>
              </div>
              <div class="col-md-12">
                <div class="alert alert-info">
                  <span class="pficon pficon-info"></span>
                  <span apiman-i18n-key="admin-export.warning">It is important that no changes are made in the API Manager during an import/export process. Disabling user access to the API Manager while this process is ongoing is strongly recommended.</span>
                </div>
              </div>
            </div>
            <!-- HR -->
            <div class="row hr-row">
              <hr/>
            </div>
            
            <div class="row">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title" apiman-i18n-key="export-data">Export Data</h3>
                </div>
                <div class="panel-body">
                  <button ng-show="exportStatus != 'downloading'" ng-click="doExport()" apiman-action-btn="" data-field="exportButton" class="btn btn-primary" apiman-i18n-key="export-all" placeholder="Exporting..." data-icon="fa-cog">Export All</button>
                  <div ng-show="exportButton.state == 'in-progress'" style="margin-top: 20px" ng-show="exportStatus == 'downloading'">
                    <div class="alert alert-info">
                      <span class="pficon pficon-info"></span>
                      <span apiman-i18n-key="admin-export.exporting-info">Once the export has started, your browser should prompt you to download the exported data file. If the export is completed, you will have to refresh this page before starting another export.</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title" apiman-i18n-key="import-data">Import Data</h3>
                </div>
                <div class="panel-body">
                  <form class="form-inline">
                    <div ng-show="importStatus == 'none'" class="form-group" style="width: 75%;">
                      <input style="width: 100%; border: 1px solid #ccc;" ng-model="importFile.name" class="form-control" name="file" required>
                    </div>
                    <button ng-show="importStatus == 'none'" ngf-select accept="application/json" class="btn btn-default" ngf-change="selectFile($files)" ngf-multiple="false" apiman-i18n-key="select">Select</button>
                  </form>
                  <button ng-show="importStatus == 'none'" ng-disabled="!importFile" ng-click="doImport(importFile)" class="btn btn-primary" apiman-i18n-key="upload-file" style="margin-top: 10px;">Upload File</button>

                  <div style="float: left; width: 100%;" ng-show="importStatus == 'uploading'">
                    <div class="progress-description">
                      <div class="spinner spinner-xs spinner-inline"></div>
                      <span apiman-i18n-key="uploading-file-msg">Uploading file, please wait...</span>
                    </div>
                    <div class="progress progress-label-top-right">
                      <div class="progress-bar" role="progressbar" aria-valuenow="{{ uploadPercentage }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ uploadPercentage }}%;">
                        <span>{{ uploadPercentage }}%</span>
                      </div>
                    </div>
                  </div>

                  <div style="float: left; width: 100%;" ng-show="importStatus == 'importing'">
                    <div apiman-i18n-key="export.importing-data-msg">Importing data, please wait - this may take some time...</div>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                        <span class="sr-only"></span>
                      </div>
                    </div>
                  </div>

                  <div style="float: left; width: 100%;" ng-show="importStatus == 'imported' || importStatus == 'error' ">
                    <div class="alert alert-danger" ng-show="importStatus == 'error'" apiman-i18n-key="data-import-failed-msg">
                      <span class="pficon pficon-error-circle-o"></span>
                      Import failed. Please check the response below for error messages:
                    </div>
                    <div class="alert alert-info"  ng-show="importStatus == 'imported'" apiman-i18n-key="data-import-completed-msg">
                      <span class="pficon pficon-info"></span>
                      Data import completed.  Please check the response below for details:
                    </div>
                    <pre style="width: 100%; max-height: 300px; margin-top: 15px; overflow: auto">{{ importResult }}</pre>
                  </div>
                  
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
  </body>
</html>
